<app-editor [(ngModel)]="data" (ngModelChange)="basicForm.patchValue($event)" [submitting]="submitting" (submit)="submit()">

  <nz-collapse [formGroup]="basicForm" (change)="change()">
    <nz-collapse-panel nzHeader="基本信息" nzActive>
      <nz-form-item>
        <nz-form-label [nzSpan]="5">名称</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <input nz-input formControlName="name" required/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">类型</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-select formControlName="type" (ngModelChange)="change()" (change)="change()">
            <nz-option nzValue="serial" nzLabel="串口"></nz-option>
            <nz-option nzValue="tcp-client" nzLabel="TCP客户端"></nz-option>
            <nz-option nzValue="tcp-server" nzLabel="TCP服务端"></nz-option>
            <nz-option nzValue="udp-client" nzLabel="UDP客户端"></nz-option>
            <nz-option nzValue="udp-server" nzLabel="UDP服务端"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">地址</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <input nz-input formControlName="addr" placeholder="串口名称，端口号，IP:端口" required/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="5">禁用</nz-form-label>
        <nz-form-control [nzSpan]="12" nzErrorTip="">
          <nz-switch formControlName="disabled"></nz-switch>
        </nz-form-control>
      </nz-form-item>

    </nz-collapse-panel>


    <nz-collapse-panel nzHeader="心跳包" nzActive *ngIf="basicForm.value.type!='serial'">
      <app-edit-heartbeat formControlName="heartbeat"></app-edit-heartbeat>
    </nz-collapse-panel>

    <nz-collapse-panel nzHeader="串口参数" nzActive *ngIf="basicForm.value.type=='serial'">
      <app-edit-serial formControlName="serial"></app-edit-serial>
    </nz-collapse-panel>

    <nz-collapse-panel nzHeader="断线重连" nzActive *ngIf="basicForm.value.type=='serial' || basicForm.value.type=='tcp-client' ||basicForm.value.type=='udp-client'">
      <app-edit-retry formControlName="retry"></app-edit-retry>
    </nz-collapse-panel>

    <nz-collapse-panel nzHeader="协议适配" nzActive>
      <app-edit-protocol formControlName="protocol"></app-edit-protocol>
    </nz-collapse-panel>

  </nz-collapse>


</app-editor>
